<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.customer"></el-input>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select v-model="form.settlementStatus" placeholder="请选择">
          <el-option label="未结算" value="1">未结算</el-option>
          <el-option label="部分结算" value="2">部分结算</el-option>
          <el-option label="结算完成" value="3">结算完成</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.former" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择时间" v-model="form.hoo" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="reconciliationId"
          label="对账单号">
      </el-table-column>
      <el-table-column
          prop="customer"
          label="客户">
      </el-table-column>
      <el-table-column
          prop="settlementStatus"
          label="结算状态">
        <template slot-scope="scope">
          <span v-if="scope.row.settlementStatus==1">未结算</span>
          <span v-if="scope.row.settlementStatus==2">部分结算</span>
          <span v-if="scope.row.settlementStatus==3">结算完成</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="orderTotal"
          label="订单总数量">
      </el-table-column>
      <el-table-column
          prop="goodsQuantity"
          label="货物数量">
      </el-table-column>
      <el-table-column
          prop="goodsTotalVolume"
          label="货物总体积"m>
      </el-table-column>
      <el-table-column
          prop="goodsTotalWeight"
          label="货物总重量">
      </el-table-column>
      <el-table-column
          prop="receivableAmount"
          label="应收总金额">
      </el-table-column>
      <el-table-column
          prop="actualAmount"
          label="实收总金额">
      </el-table-column>
      <el-table-column
          prop="creator"
          label="创建人">
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建时间">
        <template slot-scope="scope">{{ scope.row.creationTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pages"
        :page-sizes="[10,11,12,13]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import axios from "axios";
import router from "@/router";

  export default {
    data(){
      return{
        form:{
          pages: 1,
          size: 10,
          settlementStatus: '',
          former: '',
          hoo: '',
          customer: ''
        },
        tableData: [],
        total: 0,
      }
    },
    created(){
      this.onSubmit();
    },
    methods: {
      onSubmit() {
        console.log(this.form)
        axios.post("http://localhost:10086/finance/hife/finAll", this.form).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.form.size = val;
        this.onSubmit()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.form.pages = val;
        this.onSubmit()
      },
      handleClick(row) {
        // 跳转到 housekeeping 页面，并传递 reconciliationId 参数
        this.$router.push( { name: 'Housekeeping' , query: { reconciliationId: row.reconciliationId }});
      }

    }

}
</script>

